<template>
	<div>
		<el-table
			ref="multipleTable"
			:data="tData"
			tooltip-effect="dark"
			style="width: 100%;box-shadow:0 0 5px #f1f1f1;margin-top:20px;"
			@selection-change="handleSelectionChange"
			:header-cell-style="departHead"
			:cell-style="departBody" :highlight-current-row="highlight" @current-change="handleCurrentChange">
			</el-table-column>
			<template v-for="(item,idx) in tHead">
				<el-table-column width="50" type="selection" v-if="item.selection"></el-table-column>
				<el-table-column
					:label="item.label"
					:width="item.width"
					:type="item.index?'index':''" v-if="!item.selection" :align="item.align?item.align:'left'">
					<template slot-scope="scope">
						<div v-if="item.index">{{ scope.$index + 1 }}</div>
						<el-button v-if="item.operate" type="text" style="margin-right:5px;" v-for="(childitem,childidx) in item.operate" @click="operateClick(childitem,scope.row)">{{childitem}}</el-button>
						<el-switch
							v-if="item.switch"
							active-color="#28a4f4"
							inactive-color="#dcdfe6" v-model="scope.row[item.prop]" @change="switchChange(item.prop,scope.row)">
						</el-switch>
						<el-radio v-if="item.radio" :label="ri.id" v-for="(ri,ridx) in item.radio" v-model="scope.row[item.prop]" @change="radioChange(item.prop,scope.row)">{{ri.label}}</el-radio>
						<el-button v-if="item.link" @click="toInfo(scope.row)" type="text" size="small">{{scope.row[item.prop]}}</el-button>
						<el-input size="mini" v-if="item.input" v-model="scope.row[item.prop]" @blur="blurChange(item,scope.row)"></el-input>
						<div v-if="!item.index && !item.operate && !item.switch && !item.radio && !item.link && !item.selection && !item.input" v-html="scope.row[item.prop]" @click="clickFun(item,scope.row)"></div>
					</template>
				</el-table-column>
			</template>
		</el-table>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				multipleSelection:[],
				currentRow: null
			}
		},
		created() {
			// console.log(this.tHead,this.tData)
		},
		props:{
			tHead: {
				required: true,
				type: Array
			},
			tData:{
				required: true,
				type: Array
			},
			highlight:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			handleSelectionChange(val) {
        this.multipleSelection = val;
				this.$emit("selectionChange", this.multipleSelection)
			},
			departHead ({row,rowIdx}) {
				return "height:40px;background:rgba(243,243,243,1);color:rgba(102,102,102,1);padding:0;line-height:40px;font-size:14px;"
			},
			departBody ({row,rowIndex,  column, columnIndex}) {
				var style = "padding:0;font-size:14px;color:#333;height:50px;line-height:50px;"
				if(rowIndex%2 == 0){
					style += "background:#fff"
				}else{
				  style += "background:rgba(250,250,250,1)"
				}
				return style;
			},
			operateClick (val,row) {
				this.$emit("operateClick",val,row)
			},
			toInfo (row) {
				this.$emit('linkFun',row)
			},
			switchChange(prop,row){
				this.$emit('switchChange',prop,row)
			},
			radioChange(prop,row){
				this.$emit('radioChange',prop,row)
			},
			clickFun(item,row){
				if(item.click){
					this.$emit("clickFun",row);
				}
			},
			blurChange(item,row){
				if(item.input == "int"){
					if(this.$utils.isNumber(row[item])){
						row[item]=parseInt(row[item])
					}else{
						row[item]="";
					}
					this.$emit("blurChange",item.prop,row);
				}
			},
			handleCurrentChange(val){
				if(this.highlight){
					this.currentRow = val;
					this.$emit("currentChange",val)
				}
			},
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
		}
	}
</script>

<style>
</style>
